<template>
	<view :data-theme="theme">
		<!-- <useNavBar :title="$t(`page.users.orderList.navTitle`)">
			<view
				slot="right"
				style="color: #fff"
				class="iconfont icon-more"
				@click="open"
			></view>
		</useNavBar> -->
		<view class="my-order">
			<scroll-view
				class="scroll-view_x"
				scroll-x
				style="white-space: nowrap; vertical-align: middle"
				show-scrollbar="false"
			>
				<view
					class="item"
					:class="orderStatus == 0 ? 'on' : ''"
					@click="statusClick(0)"
				>
					<text>{{ $t(`page.users.orderList.orderStatus[0].name`) }}</text>
					<text class="num">({{ orderData.unPaidCount || 0 }})</text>
				</view>
				<text
					class="item"
					:class="orderStatus == 1 ? 'on' : ''"
					@click="statusClick(1)"
				>
					<text>{{ $t(`page.users.orderList.orderStatus[1].name`) }}</text>
					<text class="num">({{ orderData.unShippedCount || 0 }})</text>
				</text>
				<text
					class="item"
					:class="orderStatus == 2 ? 'on' : ''"
					@click="statusClick(2)"
				>
					<text>{{ $t(`page.users.orderList.orderStatus[2].name`) }}</text>
					<text class="num">({{ orderData.receivedCount || 0 }})</text>
				</text>
				<!-- <view class='item' :class='orderStatus==3 ? "on": ""' @click="statusClick(3)">
						<view>{{$t(`page.users.orderList.orderStatus[3].name`)}}</view>
					</view> -->
				<text
					class="item"
					:class="orderStatus == 3 ? 'on' : ''"
					@click="statusClick(3)"
				>
					<text>{{ $t(`page.users.orderList.complete`) }}</text>
					<text class="num">({{ orderData.completeCount || 0 }})</text>
				</text>
			</scroll-view>

			<view class="list">
				<view class="item" v-for="(item, index) in orderList" :key="index">
					<block v-if="orderStatus == 0">
						<view v-for="(itemn, indexn) in item.orderList" :key="indexn">
							<view class="title acea-row row-between-wrapper">
								<navigator
									:url="`/pages/merchant/home/index?id=${itemn.merId}`"
									hover-class="none"
								>
									<view class="acea-row row-middle">
										<text class="iconfont icon-shangjiadingdan mr10"></text>
										<text class="mr10">{{ itemn.merName }}</text>
										<text class="iconfont icon-gengduo"></text>
									</view>
								</navigator>
								<view class="font_color">
									<view v-if="item.offlinePayStatus === 'doing'"
										>{{ $t(`page.user.orderStatus[7].name`) }}
									</view>
									<view v-else-if="item.offlinePayStatus === 'pay_fail'">
										{{ $t(`page.user.orderStatus[8].name`) }}</view
									>
									<view v-else>{{ $t(`page.user.orderStatus[0].name`) }}</view>
								</view>
							</view>
							<view
								@click="goOrderDetails(item.orderNo)"
								class="item-info acea-row row-between row-top"
								v-for="(items, indexs) in itemn.orderInfoList"
								:key="indexs"
							>
								<view class="pictrue">
									<easy-loadimage
										mode="widthFix"
										:image-src="items.image"
									></easy-loadimage>
								</view>
								<view class="text acea-row row-between">
									<view class="name line2">{{ items.productName }}</view>
									<view class="money">
										<view>
											<statistic
												:value="items.price"
												:currency="items.currency"
											/>
										</view>
										<view>x{{ items.payNum }}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="totalPrice">
							{{ item.totalNum }} {{ $t(`page.users.orderList.item`) }},
							{{ $t(`page.users.orderList.totalPay`) }}:
							<text class="money">
								<statistic :value="item.payPrice" :currency="item.currency" />
							</text>
						</view>
					</block>
					<view v-else>
						<view class="title acea-row row-between-wrapper">
							<navigator
								:url="`/pages/merchant/home/index?id=${item.merId}`"
								hover-class="none"
							>
								<view class="acea-row row-middle">
									<text class="iconfont icon-shangjiadingdan mr10"></text>
									<text class="mr10">{{ item.merName }}</text>
									<text class="iconfont icon-gengduo"></text>
									<!-- <view>{{item.createTime}}</view> -->
								</view>
							</navigator>
							<view class="font_color">{{
								$filters.orderStatusFilter(item.status)
							}}</view>
						</view>
						<view
							@click="goOrderDetails(item.orderNo)"
							class="item-info acea-row row-between row-top"
							v-for="(items, indexy) in item.orderInfoList"
							:key="indexy"
						>
							<view class="pictrue">
								<easy-loadimage
									mode="widthFix"
									:image-src="items.image"
								></easy-loadimage>
							</view>
							<view class="text acea-row row-between">
								<view class="name line2">{{ items.productName }}</view>
								<view class="money">
									<view>
										<statistic
											:value="items.price"
											:currency="items.currency"
										/>
									</view>
									<view>x{{ items.payNum }}</view>
								</view>
							</view>
						</view>
						<view class="totalPrice"
							>{{ item.totalNum }} {{ $t(`page.users.orderList.item`) }},
							{{ $t(`page.users.orderList.totalPay`) }}:
							<text class="money">
								<statistic :value="item.payPrice" :currency="item.currency" />
							</text>
						</view>
					</view>
					<view class="bottom acea-row row-right row-middle">
						<view
							class="bnt cancelBnt"
							v-if="!item.paid && item.offlinePayStatus !== 'doing'"
							@click="cancelOrder(index, item.orderNo)"
							>{{ $t(`page.users.orderList.cancelOrder`) }}</view
						>
						<view
							class="bnt bg_color"
							v-if="!item.paid && item.offlinePayStatus !== 'doing'"
							@click="goPay(item)"
						>
							<text v-if="item.offlinePayStatus === 'pay_fail'">{{
								$t(`page.users.orderList.pay`)
							}}</text>
							<text v-else>{{ $t(`page.users.orderList.pay`) }}</text>
						</view>
						<view
							class="bnt bg_color"
							v-else-if="
								item.status == 0 ||
								item.status == 1 ||
								item.status == 3 ||
								item.offlinePayStatus === 'doing'
							"
							@click="goOrderDetails(item.orderNo)"
							>{{ $t(`page.users.orderList.viewDetails`) }}</view
						>
						<view
							class="bnt cancelBnt"
							v-if="item.status == 3"
							@click="delOrder(item.orderNo, index)"
						>
							{{ $t(`page.users.orderList.delete`) }}</view
						>
					</view>
				</view>
			</view>

			<view class="loadingicon acea-row row-center-wrapper">
				<text
					class="loading iconfont icon-jiazai"
					:hidden="loading == false"
				></text
				>{{ orderList.length > 0 ? loadTitle : "" }}
			</view>
			<view class="noCart" v-if="orderList.length == 0 && isShow && !loading">
				<view class="pictrue text-center">
					<image src="/static/images/noOrder.png"></image>
				</view>
				<text class="text-ccc">{{ $t(`page.users.orderList.empty`) }}</text>
			</view>
		</view>

		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hide"
			:title="modelTitle"
			:content="modelContent"
		></tui-modal>
	</view>
</template>

<script>
import statistic from "@/components/statistic";
import {
	getOrderList,
	orderData,
	orderCancel,
	orderDel,
	orderAwaitPay,
	payPayment,
} from "@/api/order.js";
// import payment from '@/components/payment';
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
import tuiModal from "@/components/tui-modal/tui-modal";
import { Debounce } from "@/utils/validate.js";

export default {
	components: {
		tuiModal,
		statistic,
	},
	data() {
		return {
			loading: false, //是否加载中
			loadend: false, //是否加载完毕
			loadTitle: this.$t(`page.goodsList.more`), //提示语
			orderList: [], //订单数组
			orderData: {}, //订单详细统计
			orderStatus: 0, //订单状态
			page: 1,
			limit: 20,
			payMode: [
				//预留以后多种方式支付
			],
			pay_close: false,
			pay_order_id: "",
			totalPrice: "0",
			isShow: false,
			theme: "theme3",
			rightDrawer: false,
			modelTitle: "",
			modelContent: "",
			modal: false,
			modelType: "",
			setting: { id: "", index: 0 },
			redirect: "",
			payItem: {},
		};
	},
	computed: mapState(useAppStore, ["isLogin", "userInfo"]),
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit("scroll");
	},
	onLoad: function (options) {
		this.orderStatus = Number(options.orderStatus || options.status) || 0;
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.orderList.navTitle`),
		});
	},
	onShow() {
		let that = this;
		if (this.isLogin) {
			this.loadend = false;
			this.page = 1;
			this.$set(this, "orderList", []);
			this.getOrderData();
			if (this.orderStatus === 0) {
				this.getOrderAwaitPay();
			} else {
				this.getOrderList();
			}
		} else {
			toLogin();
		}
	},
	methods: {
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		/**
		 * 事件回调
		 *
		 */
		onChangeFun: function (e) {
			let opt = e;
			let action = opt.action || null;
			let value = opt.value != undefined ? opt.value : null;
			action && this[action] && this[action](value);
		},
		/**
		 * 关闭支付组件
		 *
		 */
		payClose: function () {
			this.pay_close = false;
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function (options) {
			if (options.status) this.orderStatus = Number(options.status);
		},
		/**
		 * 获取订单统计数据
		 *
		 */
		getOrderData: function () {
			let that = this;
			orderData().then((res) => {
				that.$set(that, "orderData", res.data);
			});
		},
		/**
		 * 取消订单
		 *
		 */
		cancelOrder: Debounce(function (index, order_id) {
			let that = this;
			// that.modelTitle = this.$t(`message.login.prompt`);
			that.modelTitle = "";
			that.modelContent = this.$t(`page.orderDetails.confirmCancel`);
			that.$set(that, "modelType", "cancelOrder");
			that.setting.id = order_id;
			that.setting.index = index;
			that.modal = true;
			if (!order_id)
				return that.$util.Tips({
					title: this.$t("message.pay.errorOrder"),
				});
		}),
		/**
		 * 打开支付组件
		 *
		 */
		goPay: Debounce(function (item) {
			// this.modelTitle = this.$t(`message.login.prompt`);
			this.modalTitle = "";
			this.modelContent = this.$t(`message.tips.surePay`);
			this.$set(this, "modelType", "awaitPay");
			this.modal = true;
			this.payItem = item;
			this.redirect = item.redirect;
		}),
		/**
		 * 支付成功回调
		 *
		 */
		pay_complete: function () {
			this.loadend = false;
			this.page = 1;
			this.$set(this, "orderList", []);
			this.$set(this, "pay_close", false);
			this.getOrderData();
			if (this.orderStatus === 0) {
				this.getOrderAwaitPay();
			} else {
				this.getOrderList();
			}
		},
		/**
		 * 支付失败回调
		 *
		 */
		pay_fail: function () {
			this.pay_close = false;
		},
		/**
		 * 去订单详情
		 */
		goOrderDetails: function (order_id) {
			if (!order_id)
				return this.$util.Tips({
					title: this.$t("message.pay.errorOrder"),
				});
			uni.redirectTo({
				url:
					"/pages/order_details/index?order_id=" +
					order_id +
					"&orderStatus=" +
					this.orderStatus,
			});
		},
		/**
		 * 切换类型
		 */
		statusClick: function (status) {
			if (status == this.orderStatus) return;
			this.orderStatus = status;
			this.loadend = false;
			this.page = 1;
			this.$set(this, "orderList", []);
			if (this.orderStatus === 0) {
				this.getOrderAwaitPay();
			} else {
				this.getOrderList();
			}
		},
		/**
		 * 待支付列表
		 */
		getOrderAwaitPay: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = this.$t(`page.goodsList.more`);

			orderAwaitPay({
				page: that.page,
				limit: that.limit,
			})
				.then((res) => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, "orderList", that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "" : this.$t("page.goodsList.more");
					that.page = that.page + 1;
					that.isShow = true;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = this.$t("page.goodsList.more");
				});
		},
		/**
		 * 获取订单列表
		 */
		getOrderList: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = this.$t(`page.goodsList.more`);
			getOrderList({
				type: that.orderStatus,
				page: that.page,
				limit: that.limit,
			})
				.then((res) => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, "orderList", that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "" : this.$t("page.goodsList.more");
					that.page = that.page + 1;
					that.isShow = true;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = this.$t("page.goodsList.more");
				});
		},

		/**
		 * 删除订单
		 */
		delOrder: Debounce(function (order_id, index) {
			let that = this;
			// that.modelTitle = this.$t(`message.login.prompt`);
			that.modalTitle = "";
			that.modelContent = this.$t(`message.tips.sureDel`);
			that.$set(that, "modelType", "delOrder");
			that.setting.id = order_id;
			that.setting.index = index;
			that.modal = true;
		}),
		returns() {
			uni.navigateBack();
		},
		hide() {
			this.modal = false;
		},
		handleClick(e) {
			let index = e.index,
				that = this;
			if (index === 1 && that.modelType == "cancelOrder") {
				uni.showLoading({
					title: this.$t(`message.tips.loding`),
				});
				orderCancel(that.setting.id)
					.then((res) => {
						uni.hideLoading();
						return that.$util.Tips(
							{
								title: that.$t(`message.login.calSU`),
								icon: "success",
							},
							function () {
								that.orderList.splice(that.setting.index, 1);
								that.$set(that, "orderList", that.orderList);
								that.$set(
									that.orderData,
									"unPaidCount",
									that.orderData.unPaidCount - 1
								);
								that.getOrderData();
							}
						);
					})
					.catch((err) => {
						return that.$util.Tips({
							title: err,
						});
					});
				this.modal = false;
			} else if (index === 1 && that.modelType == "delOrder") {
				orderDel(that.setting.id)
					.then((res) => {
						that.orderList.splice(that.setting.index, 1);
						that.$set(that, "orderList", that.orderList);
						that.$set(
							that.orderData,
							"completeCount",
							that.orderData.completeCount - 1
						);
						that.getOrderData();
						return that.$util.Tips({
							title: that.$t(`message.login.delSU`),
							icon: "success",
						});
					})
					.catch((err) => {
						return that.$util.Tips({
							title: err,
						});
					});
				this.modal = false;
			} else if (index === 1 && that.modelType == "awaitPay") {
				let params = {
					orderNo: that.payItem.orderNo,
					payChannel: "mobile",
					payType: that.payItem.payType,
				};
				if (params.payType === "epay") {
					params.payType = "epay-zk";
				}
				that.$Order.goPay(params);
			} else if (index === 0) {
				that.modal = false;
			}
		},
	},
	onReachBottom: function () {
		if (this.orderStatus === 0) {
			this.getOrderAwaitPay();
		} else {
			this.getOrderList();
		}
	},
};
</script>

<style scoped lang="scss">
.icon-shangjiadingdan {
	font-size: 28rpx;
}

.icon-gengduo {
	font-size: 10rpx;
}

.my-order .header {
	height: 250rpx;
	padding: 0 30rpx;
}

.bg_color {
	@include main_bg_color(theme);
}

.my-order .header .picTxt {
	height: 190rpx;
}

.my-order .header .picTxt .text {
	color: rgba(255, 255, 255, 0.8);
	font-size: 26rpx;
}

.my-order .header .picTxt .text .name {
	font-size: 34rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 20rpx;
}

.my-order .header .picTxt .pictrue {
	width: 122rpx;
	height: 109rpx;
}

.my-order .header .picTxt .pictrue image {
	width: 100%;
	height: 100%;
}

.my-order .scroll-view_x {
	background-color: #fff;
	border-top: 1px solid #f5f5f5;
	// margin: -60rpx 0 0;
}

.my-order .scroll-view_x .item {
	text-align: center;
	font-size: 26rpx;
	color: #282828;
	margin: 26rpx 30rpx;
	display: inline-block;
	background-color: #fff;
}

.my-order .scroll-view_x .item.on {
	/* #ifdef H5 || MP */
	font-weight: bold;
	/* #endif */
	/* #ifdef APP-PLUS */
	color: #000;
	/* #endif */
	position: relative;
}

.my-order .scroll-view_x .item.on ::after {
	content: "";
	width: 100%;
	height: 4rpx;
	@include main_bg_color(theme);
	position: absolute;
	bottom: -15rpx;
	left: 0rpx;
}

.my-order .scroll-view_x .item .num {
	margin-top: 18rpx;
}

.my-order .list {
	width: 690rpx;
	margin: 14rpx auto 0 auto;
}

.my-order .list .item {
	background-color: #fff;
	border-radius: 14rpx;
	margin-bottom: 14rpx;
}

.my-order .list .item .title {
	height: 84rpx;
	padding: 0 24rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 28rpx;
	color: #282828;
}

.my-order .list .item .title .sign {
	font-size: 24rpx;
	padding: 0 13rpx;
	height: 36rpx;
	margin-right: 15rpx;
	border-radius: 18rpx;
	@include coupons_border_color(theme);
	@include main_color(theme);
}

.my-order .list .item .item-info {
	padding: 0 24rpx;
	margin-top: 22rpx;
}

.my-order .list .item .item-info .pictrue {
	width: 120rpx;
	height: 120rpx;
}

.my-order .list .item .item-info .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
}

.my-order .list .item .item-info .text {
	width: 500rpx;
	font-size: 28rpx;
	color: #999;
}

.my-order .list .item .item-info .text .name {
	width: 350rpx;
	color: #282828;
}

.my-order .list .item .item-info .text .money {
	text-align: right;
}

.font_color {
	@include main_color(theme);
}

.my-order .list .item .totalPrice {
	font-size: 26rpx;
	color: #282828;
	text-align: right;
	margin: 27rpx 0 0 30rpx;
	padding: 0 30rpx 30rpx 0;
	border-bottom: 1rpx solid #eee;
}

.my-order .list .item .totalPrice .money {
	font-size: 28rpx;
	font-weight: bold;
	@include price_color(theme);
}

.my-order .list .item .bottom {
	height: 107rpx;
	padding: 0 30rpx;
	flex-wrap: nowrap;
}

.my-order .list .item .bottom .bnt {
	// width: 176rpx;
	// height: 60rpx;
	text-align: center;
	// line-height: 60rpx;
	color: #fff;
	border-radius: 50rpx;
	font-size: 27rpx;
	padding: 10rpx 24rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.my-order .list .item .bottom .bnt.cancelBnt {
	border: 1rpx solid #ddd;
	color: #aaa;
}

.my-order .list .item .bottom .bnt ~ .bnt {
	margin-left: 17rpx;
}

.noCart {
	margin-top: 171rpx;
	padding-top: 0.1rpx;
}

.noCart .pictrue {
	// width: 414rpx;
	// height: 336rpx;
	width: 280rpx;
	height: 260rpx;
	margin: 78rpx auto 56rpx auto;
}

.noCart .pictrue image {
	width: 100%;
	height: 100%;
}

::v-deep .tui-red {
	@include main_bg_color(theme);
}

::v-deep .tui-red-outline {
	@include main_color(theme);
	@include coupons_border_color(theme);
}
</style>
